<template>
  <div class="view-box" :style="{ height: Math.ceil(views.length / 3) * 28 + 4 + 'vw' }">
    <div class="view-item" :id="item.id" :style="{ left: item.col, top: item.row }" v-for="item in views" :key="item.id"
      @mouseenter="handleMouseenter(item)" @mouseleave="handleMouseleave(item)">
      <div class="view-title">{{ item.title }}</div>
      <div class="view-switch-screen" @click="handleFullScreen(item)">
        <el-icon :size="24" color="#46c2f7">
          <FullScreen />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import dataJson from '../class/dataJson'

const views = dataJson;

const handleMouseenter = item => {
  //全屏时，不停止动画
  if (!item.isFullPage) {
    item.instance.play();
  }
}

const handleMouseleave = item => {
  //全屏时，不停止动画
  if (!item.isFullPage) {
    item.instance.stop();
  }
}

const handleFullScreen = item => {
  item.isFullPage = !item.isFullPage;
  if (item.isFullPage) {
    item.instance.dom.style.position = 'fixed';
    item.instance.dom.style.left = '2px';
    item.instance.dom.style.top = '2px';
    item.instance.dom.style.width = 'calc(100vw - 4px)';
    item.instance.dom.style.height = 'calc(100vh - 4px)';
    item.instance.dom.style.zIndex = '1003';
    item.instance.gui.open();
  } else {
    item.instance.dom.style.position = 'absolute';
    item.instance.dom.style.left = item.col;
    item.instance.dom.style.top = item.row;
    item.instance.dom.style.width = '28vw';
    item.instance.dom.style.height = '24vw';
    item.instance.dom.style.zIndex = '1001';
    item.instance.gui.close();
  }
  item.instance.resize();
}

onMounted(() => {
  views.forEach(item => {
    const dom = document.getElementById(item.id);
    item.instance.appendToBox(dom);
  })
})

window.onresize = () => {
  views.forEach(item => {
    item.instance.resize();
  })
}

</script>

<style lang="scss">
// $primary-color: #4649f7;
$primary-color: #46c2f7;
// $primary-color: #0feb51;


.view-box {
  width: 100vw;
  background: #000000;

  .view-item {
    position: absolute;
    display: inline-block;
    width: 28vw;
    height: 24vw;
    border-radius: 10px;
    border: 2px solid $primary-color;
    overflow: hidden;

    .view-title {
      position: absolute;
      top: 0px;
      left: 0px;
      border-right: 2px solid $primary-color;
      border-bottom: 2px solid $primary-color;
      display: inline-block;
      height: 24px;
      padding: 0 8px;
      color: $primary-color;
      pointer-events: none;
      z-index: 2;
    }

    .view-switch-screen {
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 4px;
      width: 32px;
      height: 32px;
      z-index: 1002;
      cursor: pointer;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .lil-gui {
      position: absolute;
      right: 0px;
      top: 0px;

      .title {
        color: $primary-color;
      }

      .children {
        .controller {
          color: $primary-color;
        }
      }
    }
  }
}
</style>